<script setup>
import PageContainer from '@/components/PageContainer.vue'
import { ref } from 'vue'
import { useUserStore } from '@/stores'
import { userUpdateInfoService } from '@/api/user'

// const userStore = useUserStore()
// console.log(userStore.user)
// 表单数据
// const formData = ref({
//   username: userStore.user.username, // 示例登录名（禁用状态）
//   nickname: userStore.user.nickname,
//   email: userStore.user.email
// })

// 优化表单数据写法
// 解构会丢失响应特性，不过这里只需要仓库的初始值进行展示，无需响应式
const { user: { email, id, nickname, username }, getUser } = useUserStore()
const formData = ref({
  id,
  username,
  nickname,
  email
})

// 表单校验规则
const formRules = {
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { pattern: /^\S{2,10}$/, message: '长度在2到10个非空字符', trigger: 'blur' },
  ],
  email: [
    // {
    //   pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
    //   message: '请输入正确的邮箱格式',
    //   trigger: 'blur'
    // }
    // 邮箱格式可以直接用 type="email"
    { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] },
    { required: true, message: '请输入邮箱', trigger: 'blur' }
  ]
}

// 表单引用
const formRef = ref()

// 提交表单
const submitForm = async () => {
  // formRef.value.validate((valid) => {
  //   if (valid) {
  //     ElMessage.success('提交成功！')
  //     console.log('表单数据：', formData.value)
  //     // 这里可以添加实际的提交逻辑
  //   } else {
  //     ElMessage.error('请检查表单填写是否正确')
  //     return false
  //   }
  // })
  // 使用 await 简便一些
  await formRef.value.validate()
  // 提交修改 - 后端
  await userUpdateInfoService(formData.value)
  // 通知 pinia 的 useer 模块，进行更新
  // 注：getUser 是从 user 模块 useUserStore 解构的
  getUser()
  // 提示用户
  ElMessage.success('修改成功')
}
</script>

<template>
  <page-container title="基本资料">
    <!-- 表单部分 -->
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      class="demo-form"
    >
      <!-- 1. 登录名称（禁用） -->
      <el-form-item label="登录名称" prop="username" style="width: 50%;">
        <el-input v-model="formData.username" disabled />
      </el-form-item>

      <!-- 2. 用户昵称（需校验） -->
      <el-form-item label="用户昵称" prop="nickname" style="width: 50%;">
        <el-input
          v-model="formData.nickname"
          placeholder="请输入2-10位昵称"
          clearable
        />
      </el-form-item>

      <!-- 3. 用户邮箱（需校验） -->
      <el-form-item label="用户邮箱" prop="email" style="width: 50%;">
        <el-input
          v-model="formData.email"
          placeholder="请输入邮箱"
          clearable
        />
      </el-form-item>

      <!-- 4. 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交修改</el-button>
      </el-form-item>
    </el-form>
  </page-container>
</template>